import TinyReact from './TinyReact/index';

const root = document.getElementById('root');

const virtualDOM = (
    <div className="container">
      <h1>你好 Tiny React</h1>
      <h2>(编码必杀技)</h2>
      <div>
        嵌套1 <div>嵌套 1.1</div>
      </div>
      <h3>(观察: 这个将会被改变)</h3>
      {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
      {2 == 2 && <div>2</div>}
      <span>这是一段内容</span>
      <button onClick={() => alert("你好")}>点击我</button>
      <h3>这个将会被删除</h3>
      2, 3
    </div>
  )

  const modifyDOM = (
    <div className="container">
      <h1>你好 Tiny React</h1>
      <h2>(编码必杀技)</h2>
      <div>
        嵌套1 <div>嵌套 1.1</div>
      </div>
      <h3>(观察: 这个将会被改变)</h3>
      {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
      {2 == 2 && <div>2</div>}
      <span>这是一段修改后的内容</span>
      <button onClick={() => alert("你好")}>点击我</button>
      <h6>这个将会被删除</h6>
      2, 3
    </div>
  )

  // TinyReact.render(virtualDOM, root);
  // setTimeout(() => {
  //   TinyReact.render(modifyDOM, root);
  // }, 2000);

  // function Heart(props) {
  //   return <div>{props.title}</div>
  // }
  // TinyReact.render(<Heart title = 'hello react'/>, root);

  class Alert extends TinyReact.Component {
    constructor (props) {
      super(props);
      this.state = {
        name: '周杰伦'
      };
      this.handleClick = this.handleClick.bind(this);
    }
    render () {
      return (
        <div>
          {this.props.name}-哼哼哈兮-{this.state.name}
          <button onClick={this.handleClick}>改变name</button>
        </div>
      )
    };
    handleClick() {
      this.setState({
        name: '周董'
      });
    };
  };
  TinyReact.render(<Alert name='jay' />, root);